<template>
    <div class="comments">
       <div class="top">
           <h2>报告详情</h2>
       </div>
       <div class="alls">
            <div class="alltop">
                <div class="topmsg">
                    <p>体检人信息</p>
                </div>
                <div class="topintro">
                    <div class="introleft">
                        <el-descriptions class="margin-top" :column="3"  :labelStyle="{color:'#aaa',margin:'0 15px 10px 0'}">
                        <el-descriptions-item label="姓名">xxxx</el-descriptions-item>
                        <el-descriptions-item label="性别">男</el-descriptions-item>
                        <el-descriptions-item label="年龄">33</el-descriptions-item>
                        <el-descriptions-item label="证件号码">12345654345566</el-descriptions-item>
                        <el-descriptions-item label="套餐名称">男性体检基础A套餐</el-descriptions-item>
                        <el-descriptions-item label="报告时间">2022-11-1 12:23</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    
                </div>
            </div>
            <div class="alldown">
                <div class="topmsg">
                    <p>报告详情</p>
                </div>
                <div class="box">
                    <div class="leftbox">
                        <div class="items">
                            <p class="name">项目名称：<span>常规检查</span></p>
                            <p class="number">项目编号：<span>20900001</span></p>
                        </div>
                        <div class="table1">
                            <el-table
                                :data="tableData1"
                                style="width: 100%">
                                <el-table-column
                                    prop="name"
                                    label="项目名称"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="result"
                                    label="检查结果"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="value"
                                    label="参考值">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="rightbox">
                        <div class="items">
                            <p class="name">项目名称：<span>血常规三项</span></p>
                            <p class="number">项目编号：<span>20900001</span></p>
                        </div>
                        <div class="table2">
                            <el-table
                                :data="tableData2"
                                style="width: 100%">
                                <el-table-column
                                    prop="name"
                                    label="项目名称"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="result"
                                    label="检查结果"
                                    width="180">
                                </el-table-column>
                                <el-table-column
                                    prop="value"
                                    label="参考值">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
 <script>
 
 export default {
   name: 'ReportView',
   components:{},
    data () {
        return {
            tableData1: [{
            name: '身高',
            result: '175cm',
            value: ''
          }, {
            name: '体重',
            result: '55kg',
            value: ''
          }, {
            name: 'BMI',
           result: '19.0',
            value: '18.5-22.9'
          }, {
            name: 'BMI',
            result: '19.',
            value: '18.5-22.'
          },{
            name: 'BMI',
            result: '19.',
            value: '18.5-22.'
          }],
          tableData2: [{
            name: '身高',
            result: '175cm',
            value: ''
          }, {
            name: '体重',
            result: '55kg',
            value: ''
          }, {
            name: 'BMI',
           result: '19.0',
            value: '18.5-22.9'
          }, {
            name: 'BMI',
            result: '19.',
            value: '18.5-22.'
          },{
            name: 'BMI',
            result: '19.',
            value: '18.5-22.'
          },{
            name: 'BMI',
            result: '19.',
            value: '18.5-22.'
          },{
            name: 'BMI',
            result: '19.',
            value: '18.5-22.'
          }]
        }
    },
   methods: {
        getyes(){
            if(this.$route.name!='body'){
                alert('保存成功')
				this.$router.push('/body')
			}
        },
        getno(){
            if(this.$route.name!='body'){
				this.$router.push('/body')
			}
        },

   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .coments{
   padding: 0 0 0 10px;
   box-sizing: border-box;
 }
 .top{
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
 }
h2{
   height: 30px;
   line-height: 30px;
   font-weight: 400;
   font-style: normal;
   font-size: 18px;
   margin-left: 30px;
}
h2::after{
   content: '';
   border-width: 0px;
   position: absolute;
   left: 0px;
   top:12px;
   width: 24px;
   height: 8px;
   border-radius: 10px;
   background-color: #006EFF;
}
.alls{
    margin-top: 20px;
}
.alltop{
    margin-bottom: 20px;
    width: 100%;
    height: auto;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
}
.topmsg{
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    color: #006EFF;
    height: 50px;
    line-height: 50px;
    background-color: rgba(242, 242, 242, 1);
}
.topmsg p{
    margin-left: 20px;
}
/* ::v-deep [data-v-16a27f79] .el-descriptions-item__container {
    display: flex;
    align-items: center;
} */
.topintro{
    display: flex;
    padding: 20px;
    box-sizing: border-box;
}
/* .introright{
    text-align: center;
} */
.people{
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.alldown{
    width: 100%;
    height:auto;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
}
.box{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
}
.leftbox,.rightbox{
    width: 47%;
    padding: 10px 0;
    box-sizing: border-box;
}
.items{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.name,.number{
    font-size: 11px;
    color: #aaa;
    margin-right: 20px;
}
.items span{
    font-size: 14px;
    color: #333;
}
::v-deep .el-table th.el-table__cell {
    color: #333;
    font-size: 14px;
    font-weight: normal;
    background-color: rgba(242, 242, 242, 1)
}
</style>